<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            margin: 10px;
        }
        .box{
            
            margin: 10px 0 0 0 ;
        }
        .box span{
            margin-left: 10px;
            border: 1px solid #000;
        }
        /* li{
            list-style: none;
            height: 30px;
            border: 2px solid #000;
            border-radius: 10px;
            margin: 5px;
        } */
    </style>
</head>
<body>
    <div id="app">
           <p>
        车型:<input v-model="abc.motorcycle" type="text">
    </p>
    <p>
        品牌:<input v-model="abc.brand" type="text">
    </p>
    <p>
        年份:<input v-model="abc.year" type="text">
    </p>
    <p>
        价格:<input v-model="abc.money" type="text">
    </p>
    <div v-for="(item, index) in car" class="box" v-show="item.bool">
    <span>车型:{{item.motorcycle}}</span>
    <span>品牌:{{item.brand}}</span>
    <span>年份:{{item.year}}</span>
    <span>美刀:{{item.money}}</span>
 
    </div>
   
    <!-- <ul>
        <li v-for="item in car" v-text="item"></li>
    </ul> -->
    </div>
 

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                val:'',
                abc:
                    {
                        motorcycle:'',
                        brand:'',
                        year:'',
                        money:'',
                    },
                
                car:[
                    {
                        motorcycle:'大型车',
                        brand:'奥曼',
                        year:"2020",
                        money:'300000',
                        bool:true
                    },
                    {
                        motorcycle:'跑车',
                        brand:'保时捷',
                        year:"2020",
                        money:'1300000',
                        bool:true
                    },
                    {
                        motorcycle:'跑车',
                        brand:'大牛',
                        year:"2021",
                        money:'3000000',
                        bool:true
                    },
                    {
                        motorcycle:'商务车',
                        brand:'劳斯莱斯',
                        year:"2018",
                        money:'5550000',
                        bool:true
                    },
                    {
                        motorcycle:'大型车',
                        brand:'野马',
                        year:"2021",
                        money:'800000',
                        bool:true
                    },
                    {
                        motorcycle:'小型车',
                        brand:'小刀',
                        year:"2021",
                        money:'8888',
                        bool:true
                    },
                    {
                        motorcycle:'商务车',
                        brand:'奔驰',
                        year:"2021",
                        money:'1200000',
                        bool:true
                    },
                    {
                        motorcycle:'跑车',
                        brand:'道奇',
                        year:"2015",
                        money:'600000',
                        bool:true
                    },
                    {
                        motorcycle:'小型车',
                        brand:'桑塔纳',
                        year:"2005",
                        money:'50000',
                        bool:true
                    },
                    {
                        motorcycle:'大型车',
                        brand:'霸道',
                        year:"2017",
                        money:'800000',
                        bool:true
                    }
                ]
            },
            watch:{
                
                // car(newValue , oldValue){
                //     console.log()
              

                // }
                abc:{
                     deep:true,
                    handler(newValue, oldValue){
                        this.car.forEach(function(item , index){
                            if (newValue.motorcycle === item.motorcycle || newValue.motorcycle === '') {
                               item.bool=true; 
                               if (newValue.brand === item.brand || newValue.brand === '') {
                                item.bool=true;
                                if (newValue.year === item.year || newValue.year === '') {
                                    item.bool=true;
                                   if (newValue.money === item.money || newValue.money === '') {
                                        item.bool=true;
                                            }else{
                                                item.bool=false;
                                            }
                                    }else{
                                        item.bool=false;
                                    }
                                }else{
                                    item.bool=false;
                                }
                            }else{
                                item.bool=false;
                            }
                    
                        })


                    
                //   console.log(newValue.motorcycle)
                //   console.log(newValue.brand)
                //   console.log(newValue.year)
                //   console.log(newValue.money)
                    // if(newValue.motorcycle != this.motorcycle ){
                    //     console.log(111)
                    // }else{
                    //     console.log(222)
                    // }
                    // if (newValue.brand === item.brand || newValue.brand === '') {
                    //              item.bool=true;
                    //              if (newValue.year === item.year || newValue.year === '') {
                    //                 item.bool=true;
                    //                 if (newValue.money === item.money || item.money === '') {
                    //                     item.bool=true;
                    //                 }
                    
                   
                }
                }
               
            }
        })
    </script>
</body>
</html>